<template>
  <!-- 申请列表页面 -->
  <div id="application-manage">
    <el-row>
      <el-col :span="22">
        <!--这个属性接收名称，下面统一定义 -->
        <el-input
          placeholder="请输入名称"
          type="text"
          v-model="query"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <!-- 按钮事件也是下面统一定义 -->
        <el-button type="primary" @click="setQueryName">搜索</el-button>
      </el-col>
    </el-row>
    <!--tableData是表格数据-->
    <el-table :data="tableData" stripe style="width: 100%" v-if="tableData">
      <el-table-column
        type="index"
        label="序号"
        width="180"
        align="center"
        :index="hIndex"
      >
      </el-table-column>
      <el-table-column
        v-for="(col, index) in columns"
        :key="index"
        :label="col.label"
        :prop="col.prop"
        :width="col.width"
        align="center"
      >
        <!-- col代表所有咧数据 row代表行信息 -->
        <template slot-scope="scope">
          <div v-if="scope.column.property === 'status'">
            <el-tag :type="scope.row[scope.column.property] | statusColor"
              >{{ scope.row[scope.column.property] | status }}
            </el-tag>
          </div>
          <div v-else-if="scope.column.property === 'opts'">
            <el-button type="danger" size="mini" @click="delerow(scope.row.id)"
              >删除</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="editrow(scope.row)"
              :disabled="[0, 2, 3, 6].indexOf(scope.row['status']) === -1"
              >编辑</el-button
            >
            <el-button
              type="success"
              size="mini"
              @click="summit(scope.row.id)"
              :disabled="[0, 2, 3, 6].indexOf(scope.row['status']) === -1"
              >提交</el-button
            >
          </div>
          <div v-else>
            {{ scope.row[scope.column.property] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑对话框 -->
    <!--dialogVisible变量控制对话框是否显示-->
    <el-dialog
      title="申请管理-编辑"
      :visible="dialogVisible"
      @close="dialogVisible = false"
      width="30%"
    >
      <div class="form-box">
        <el-form
          ref="updateForm"
          :model="updateForm"
          :rules="rules"
          label-width="80px"
        >
          <el-row>
            <el-col :xl="20" :lg="20" :md="12" :sm="24" :xs="24">
              <el-form-item label="姓名" prop="name">
                <el-input type="input" v-model="updateForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xl="20" :lg="20" :md="12" :sm="24" :xs="24">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="updateForm.sex">
                  <el-option key="man" label="男" value="man"> </el-option>
                  <el-option key="woman" label="女" value="woman"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="btns clear-fix">
          <div>
            <el-button type="primary" @click="submitUpdate">提交</el-button>
            <el-button @click="cleanFrom">重置</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 分页器 -->
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="updateSize"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageOptions.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="rows"
    >
    </el-pagination>
  </div>
</template>

<script>
import {
  getLoanList,
  updateLoan,
  deleteLoan,
  submitApprove,
} from "@/apis/loan.js";
export default {
  filters: {
    statusColor(status) {
      switch (status) {
        case 0:
          return "success";
          break;
        case 1:
          return "";
          break;
        case 2:
          return "success";
          break;
        case 3:
          return "danger";
          break;
        case 4:
          return "warning";
          break;
        case 5:
          return "success";
          break;
        case 6:
          return "danger";
          break;
        case 7:
          return "success";
          break;
        default:
          return "danger";
      }
    },
    status(status) {
      switch (status) {
        case 0:
          return "进件";
          break;
        case 1:
          return "提交初审";
          break;
        case 2:
          return "初审通过";
          break;
        case 3:
          return "初审拒绝";
          break;
        case 4:
          return "提交终审";
          break;
        case 5:
          return "终审通过";
          break;
        case 6:
          return "终审拒绝";
          break;
        case 7:
          return "生成合同";
          break;
        default:
          return "出错了";
      }
    },
  },
  data() {
    return {
      //搜索框接受到的参数
      query: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      columns: [
        {
          label: "姓名",
          prop: "name",
          width: "80",
        },
        {
          label: "出生日期",
          prop: "birthday",
          width: "300",
        },
        {
          label: "性别",
          prop: "sex",
        },
        {
          label: "教育程度",
          prop: "education",
        },
        {
          label: "居住地址",
          prop: "address1",
        },
        {
          label: "手机号",
          prop: "mobile_phone",
        },
        {
          label: "申请状态",
          prop: "status",
        },
        {
          label: "操作",
          width: "280",
          prop: "opts",
        },
      ],
      //请求数据的页码
      pageOptions: {
        pageNo: 1,
        pageSize: 10,
      },
      rows: 0,
      //绑定编辑对话框数据
      updateForm: {
        name: "",
        sex: "",
        id: 0,
      },
      //编辑对话框规则
      rules: {
        name: [{ required: true, message: "必须填写用户名" }],
        sex: [{ required: true, message: "必须填写性别" }],
      },
      //控制对话框是否显示
      dialogVisible: false,
    };
  },
  methods: {
    //改变页码页数方法
    handleCurrentChange(pageNo) {
      this.pageOptions.pageNo = pageNo;
      this.getLoanList();
    },
    updateSize(pageSize) {
      this.pageOptions.pageSize = pageSize;
      this.getLoanList();
    },
    //删除方法
    async delerow(id) {
      let res = await deleteLoan(id);
      if (res.data.code == 20000) {
        this.getLoanList();
        console.log(res);
      }
    },
    //编辑方法
    async editrow(row) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.updateForm.id = row.id;
        this.updateForm.name = row.name;
        this.updateForm.sex = row.sex;
      });
    },
    //编辑中的提交
    async submitUpdate() {
      //调用更新接口
      let res = await updateLoan(this.updateForm);
      if (res.data.code === 20000) {
        //重置
        this.cleanFrom();
        this.dialogVisible = false;
        this.getLoanList();
      }
    },
    //重置方法
    cleanFrom() {
      this.$refs["updateForm"].resetFields();
    },
    //提交审核方法
    async summit(id) {
      let res = await submitApprove(id);
      if (res.data.code == 20000) {
        this.getLoanList();
        console.log(res);
      }
    },
    //格式化性别
    getSex(str) {
      return str === "man" ? "男" : "女";
    },
    //格式化教育
    getEducation(str) {
      return str === "college" ? "大学" : "高中";
    },

    //格式化日期
    getBirthday(date) {
      let dateNow = new Date(date);
      function convert(data) {
        return data < 10 ? "0" + data : data;
      }
      let year = dateNow.getFullYear();
      let month = convert(dateNow.getMonth());
      let day = convert(dateNow.getDate());

      let hours = convert(dateNow.getHours());
      let minutes = convert(dateNow.getMinutes());
      let seconds = convert(dateNow.getSeconds());
      let dateStr =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      return dateStr;
    },
    //搜索方法
    async setQueryName() {
      this.pageOptions.name = this.query;
      await this.getLoanList();
      this.pageOptions.name = null;
    },
    //获取数据方法
    async getLoanList() {
      let res = await getLoanList(this.pageOptions);
      // 20000代表成功，rows是后端返回的总条数
      if (res.data.code === 20000) {
        this.tableData = res.data.data.data.data.map((item) => {
          //格式化数据
          item.sex = this.getSex(item.sex);
          item.education = this.getEducation(item.education);
          item.birthday = this.getBirthday(item.birthday);
          return item;
        });

        this.rows = res.data.data.rows;
      }
    },
  },
  mounted() {
    this.getLoanList();
    console.log(this.hIndex);
  },
  computed: {
    hIndex() {
      return (this.pageOptions.pageNo - 1) * this.pageOptions.pageSize + 1;
    },
  },
};
</script>

<style>
</style>